<template>
  <div class="department-container">
    <div class="app-container">
      <el-tree
        default-expand-all
        :data="deptTreeData"
        :props="{ label: 'name' }"
        :expand-on-click-node="false"
      >
        <!-- 作用域插槽 -->
        <!-- #default="{ node, data }" 只能作用在template -->
        <!-- data: 当前行的部门对象 -->
        <template #default="{ data }">
          <el-row type="flex" justify="space-between" align="middle">
            <el-col :span="20">
              {{ data.name }}
            </el-col>
            <el-col :span="4" class="tree-right">
              <div class="tree-right-manager">{{ data.managerName }}</div>
              <div class="tree-right-oper">
                <el-dropdown @command="handleCommand($event,data.id)">
                  <span>
                    操作
                    <i class="el-icon-arrow-down" />
                  </span>
                  <el-dropdown-menu>
                    <template>
                      <el-dropdown-item command="add">新增子部门</el-dropdown-item>
                      <el-dropdown-item command="edit">编辑部门</el-dropdown-item>
                      <el-dropdown-item command="del">删除部门</el-dropdown-item>
                    </template></el-dropdown-menu>
                </el-dropdown>
              </div>
            </el-col>
          </el-row>
        </template>
      </el-tree>
    </div>

    <!-- 4.使用组件 并向子组件传递数据-->
    <AddOrEditDept
      ref="deptRef"
      :visible.sync="visible"
      :current-dept-id="currentDeptId"
      @success="getDeptList"
    />
  </div>
</template>

<script>
import { list2Tree } from '@/utils'
import { getDeptListAPI, delDeptAPI } from '@/api/department'
// 2.导入组件
import AddOrEditDept from './components/add-or-edit.dept.vue'
export default {
  name: 'Department',
  components: {
    // 3.注册组件
    AddOrEditDept
  },
  data() {
    return {
      // 部门树形数据
      deptTreeData: [],
      // 控制新增或编辑弹框的可见性
      visible: false,
      // 记录当前部门的id
      currentDeptId: -1
    }
  },
  created() {
    // 创建后 发送请求渲染部门列表
    this.getDeptList()
  },
  methods: {
    // 处理下拉菜单的3个动作
    async handleCommand(command, deptId) {
      switch (command) {
        // 新增
        case 'add':
          // 点击显示新增模态框
          this.visible = true
          // 记录部门id
          this.currentDeptId = deptId
          break
        // 编辑
        case 'edit':
          // 点击显示新增模态框
          this.visible = true
          // 父组件如何调用子组件的方法: ref + $refs
          this.$refs.deptRef.getDeptDetail(deptId)
          break
        // 删除
        case 'del':
          try {
            // 消息确认
            // this.$confir 返回一个Promise对象,需要await 和 async ,而且需要try-catch捕获错误
            await this.$confirm('确认删除此部门me', '提示', {
              type: 'warning'
            })
            // 发送请求删除
            await delDeptAPI(deptId)
            // 提示信息
            this.$message.success('删除成功')
            // 重新获取部门列表
            this.getDeptList()
          // eslint-disable-next-line no-empty
          } catch (error) {
          }
          break
      }
    },
    // 获取部门列表
    async getDeptList() {
      // 发请求 获取部门列表
      const deptList = await getDeptListAPI()
      // 注意: deptList 是对象数组不是树形数据不能直接用 ,需要转换,
      // 保存数据 (调用转换为树形结构的函数,并接收返回值)
      this.deptTreeData = list2Tree(deptList, 0)
    }
  }
}
</script>

<style lang="scss" scoped>
  .department-container {
    .app-container {
      padding: 30px 140px;
      font-size: 15px;
    }
    .el-row {
      width: 100%;
      .tree-right {
        display: flex;
        justify-content: flex-end;
        font-size: 14px;
        &-manager, &-oper  {
          width: 70px;
        }
      }
    }
  }
</style>
